<template>
  <div class="fileupload_container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="'/components/main'">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据上传</el-breadcrumb-item>
      <el-breadcrumb-item>普通文件</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="resetForm" formData :model="formData">
      <!--专题选择-->
      <el-form-item label="所属专题" :label-width="formLabelWidth">
        <el-select v-model="formData.topic"
                   style = "width: 300px"
                   placeholder="请选择所属专题">
          <el-option label="防洪抗旱" value="0"></el-option>
          <el-option label="河流水系" value="1"></el-option>
          <el-option label="水环境" value="2"></el-option>
          <el-option label="水利工程" value="3"></el-option>
          <el-option label="水文" value="4"></el-option>
          <el-option label="水资源" value="5"></el-option>
          <el-option label="统计年鉴" value="6"></el-option>
          <el-option label="政策规划" value="7"></el-option>
          <el-option label="地理空间" value="8"></el-option>
          <el-option label="其他" value="9"></el-option>
        </el-select>
      </el-form-item>
      <!--地区选择-->
      <el-form-item label="所属地区" :label-width="formLabelWidth">
        <div class="block">
          <el-cascader
            v-model="formData.districtList"
            :options="options"
            style = "width: 300px"
          ></el-cascader>
        </div>
      </el-form-item>
      <!--描述输入-->
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input
          class="describe"
          type="textarea"
          v-model="formData.summary"
          :autosize="{ minRows: 5}"
          style = "width: 800px"
          placeholder="请简要描述您上传文件的内容"
          maxlength="1000"
          show-word-limit
        ></el-input>
      </el-form-item>
      <!--图片选择上传-->
      <!--第一种-->
      <div>
        <!--<el-upload action="" :http-request="pictureupload">-->
        <!--<el-upload :file-list="fileList">-->
        <!-- <el-upload action="" :http-request="picturebind">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload> -->
        <!--<el-upload-->
        <!--action=""-->
        <!--multiple-->
        <!--:limit="3"-->
        <!--:file-list="fileList">-->
        <!--<el-button size="small" type="primary">点击上传</el-button>-->
        <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        <!--</el-upload>-->
      </div>

      <!--第二种-->
      <!--<input-->
      <!--type="file"-->
      <!--@change="addFile"-->
      <!--ref="inputer"-->
      <!--accept="application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/pdf"-->
      <!--&gt;-->
      <!--<p>支持文件格式：.ppt .pptx .doc .docx .pdf ，单个文件不能超过20M.</p>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!--<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
      <el-upload action="" :http-request="picturebind" class="uploadbtn">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <el-button type="primary" @click="pictureupload" size="small"
        >确 定</el-button
      >
      <el-button @click="resetForm('formData')" size="small"
        >取 消</el-button
      >
    </div>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import Uploader from "./Uploader";
import FileUrl from "./models/file-url";
import FileMd5 from "./models/file-md5.js";
import { pictureupload } from "../Api/api";
export default {
  name: "BigFileUpload",
  data() {
    return {
      // fileList: [],
      dialogFormVisible: false,
      //表单提交数据
      formData: {
        file: "",
        topic: "",
        districtList: [],
        summary: "",
        desc: "",
      },
      formLabelWidth: "120px",
      //地区选择数据
      districtList: [],
      options: [
        {
          value: "湖北省",
          label: "湖北省",
          children: [
            {
              value: "武汉市",
              label: "武汉市",
              children: [
                {
                  value: "洪山区",
                  label: "洪山区",
                },
                {
                  value: "汉口区",
                  label: "汉口区",
                },
                {
                  value: "汉阳区",
                  label: "汉阳区",
                },
                {
                  value: "武昌区",
                  label: "武昌区",
                },
              ],
            },
            {
              value: "襄樊",
              label: "襄樊",
            },
            {
              value: "宜昌",
              label: "宜昌",
            },
            {
              value: "黄石",
              label: "黄石",
            },
            {
              value: "鄂州",
              label: "鄂州",
            },
            {
              value: "随州",
              label: "随州",
            },
            {
              value: "荆州",
              label: "荆州",
            },
            {
              value: "荆门",
              label: "荆门",
            },
            {
              value: "十堰",
              label: "十堰",
            },
            {
              value: "孝感",
              label: "孝感",
            },
            {
              value: "黄冈",
              label: "黄冈",
            },
            {
              value: "咸宁",
              label: "咸宁",
            },
          ],
        },
        {
          value: "湖南",
          label: "湖南省",
          children: [
            {
              value: "长沙",
              label: "长沙",
              children: [
                {
                  value: "芙蓉区",
                  label: "芙蓉区",
                },
                {
                  value: "天心区",
                  label: "天心区",
                },
                {
                  value: "岳麓区",
                  label: "岳麓区",
                },
                {
                  value: "开福区",
                  label: "开福区",
                },
              ],
            },
          ],
        },
      ],
    };
  },

  components: {
    uploader: Uploader,
  },
  watch: {
    files: {
      handler() {
        this.tableData = [];
        this.files.forEach((e) => {
          this.tableData.push({
            name: e.name,
            size: e.size,
            status: e.status,
            id: e.id,
            percent: e.percent,
          });
        });
      },
      deep: true,
    },
  },

  methods: {
    picturebind(param) {
      let that = this;
      that.formData.file = param.file;
    },
    pictureupload() {
      let that = this;
      let updata = new FormData();
      console.log(that.formData);
      updata.append("file", that.formData.file);
      updata.append("topic", that.formData.topic);
      let districtStr = '';
      for(let i = 0; i < that.formData.districtList.length; i++){
        districtStr += that.formData.districtList[i];
      }
      updata.append("district", districtStr);
      console.log(districtStr);
      console.log(that.formData.districtList);
      updata.append("summary", that.formData.summary);
      let phoneNumber = sessionStorage.getItem("phoneNumber");
      updata.append("uploader", phoneNumber);
      console.log(updata);
      pictureupload(updata).then(function (res) {
        console.log(res);
        if (res.data.code === 0) {
          // that.$message({
          //   message: "上传成功",
          //   type: "success",
          // });
         that.$alert('上传成功', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });



          // debugger
          //  this.$refs.upload.clearFiles();
        } else {
          that.$message.error("上传失败");
        }
      });
    },
      resetForm() {
        this.$refs.resetForm.resetFields();
      }

    // //上传文件
    // addFile: function() {
    //   let _this = this;
    //   let inputDOM = this.$refs.inputer;
    //   // let oldLen = this.filLen;
    //   this.file = inputDOM.files[0];
    //   let len = this.file.length;
    //   let size = Math.floor(this.file.size / 1024);
    //   if (size > 20 * 1024 * 1024) {
    //     alert("请选择20M以内的图片！");
    //     return false;
    //   }
    //   this.formData.file=this.file;
    //   addFile(this.formData).then(function (res) {
    //     console.log(res);
    //     if (res.data.code === 200) {
    //       let resp = res.data.data;
    //       if (resp.data === 0) {
    //         //  清空变量状态
    //       }
    //     } else {
    //       alert('文件上传失败！')
    //     }
    //   })
    // },
  },
};
</script>


<style scoped>
.fileupload_container {
  width: 90%;
  margin: 0 auto;
}
.el-breadcrumb {
  padding-top: 20px;
  padding-bottom: 20px;
}
.describe {
  width: 300px;
}
.dialog-footer {
  margin-left: 120px;
}
.uploadbtn {
  float: left;
  margin-right: 25px;
}
</style>
